<script>
import { h } from 'vue';
import { ElTableColumn, ElInput } from 'element-plus';
export default {
    name: 'FormTableColumn',
    props: {
        label: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        readyOnly: {
            type: Boolean,
            default: false
        },
        prop: {
            type: String
        },
        clearable: {
            type: Boolean,
            default: true
        }
    },
    render() {
        const child = this.disabled
            ? h(ElTableColumn, { label: this.label, prop: this.prop })
            : h(
                  ElTableColumn,
                  { label: this.label, prop: this.prop },

                  {
                      default: (scope) => {
                          return h(ElInput, {
                              disabled: this.disabled,
                              clearable: this.clearable,
                              modelValue: scope.row[this.prop],
                              'onUpdate:modelValue': (value) => {
                                  scope.row[this.prop] = value;
                              }
                          });
                      }
                  }
              );
        return child;
    }
};
</script>

<style lang="scss" scoped></style>
